<template>
    <div>
        {{ info }}
        <table class="table table-brodered ">
            <thead>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" v-model="info.uName"></td>
                </tr>
                <tr>
                    <td>时间</td>
                    <td><input type="date" v-model="info.data"></td>
                </tr>
                <tr>
                    <td>地址</td>
                    <td><input type="text" v-model="info.add"></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><input type="file" @change="img" >
                    <img :src="info.img" width="60" height="60"  ></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" @click="add" ></td>
                </tr>
                
            </thead>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';

let info:any=ref({
  uName: "",
  data: "",
  add: "",
  img: "",
  state: 0,
  isDell: 0
})

const add=()=>{
    axios({
        url:'https://localhost:7124/api/User/Add',
        method:'post',
        data:info.value

    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1)
    {
        alert("姓名重复");
        return;
    }
        if(res.data>0)
    {
        alert("成功");
    }
    } )

}

const img=(e:any)=>{
    console.log(e);

    let f=e.target.files[0];
    let fs=new FormData();
    fs.append("file",f);

    axios({
        url:'https://localhost:7124/api/Img',
        method:'post',
        data:fs
    })
    .then((res)=>{
        console.log(res.data);
        info.value.img=res.data
    })
    
}

</script>

<style scoped>

</style>
